<template>
    <div>
        <table>
        <tr>
            <td>姓名</td>
            <input type="text" v-model="username">
        </tr>
        <tr>
            <td>手机号</td>
            <input type="text" v-model="phone">
        </tr>
        <tr><Button type="submit" @click="submit">提交订单</button></tr>
        </table>
        <!-- 订单展示 -->
        <div >
            <Table>
            <tr>
                <th>用户ID</th>
                <th>商品标题</th>
                <th>商品价格</th>
                <th>收件人姓名</th>
                <th>收件人电话</th>
                
            </tr >
            <tr v-for="(item,index) in orderlist" :key="index">
                <td>{{item.uid}}</td>
                <td>{{item.title}}</td>
                <td>{{item.price}}</td>
                <td>{{item.username}}</td>
                <td>{{item.phone}}</td>
            </tr>
               
            </Table>
        </div>

    </div>
</template>

<script>
export default {
    data () {
        return {
            cartlist:[],
            phone:'',
            username:'',
            //展示订单
            orderlist:[]

        }
    },
    methods: {
        
        submit(){
            if(/^1[3578]\d{9}$/.test(this.phone)){
                }
            else{
                this.$Message('您输入的手机号码有误')
                return false
            }
             this.axios.post('http://127.0.0.1:8000/mylearn/submitview/',{'username':this.username,'phone':this.phone,'title':this.cartlist[0].title,price:this.cartlist[0].price,uid:localStorage.getItem('uid')})
            .then(result=>{
                console.log(result)
                this.showorder()
            })
        },
        // 数据展示
        showorder(){
             this.axios.get('http://127.0.0.1:8000/mylearn/submitview/',{params:{uid:localStorage.getItem('uid')}})
            .then(result=>{
                console.log(result)
                this.orderlist=result.data.message

                // this.$Message('订单提交成功')
               
            })
            

        }
        
    },
    mounted() {
         var cartlist=localStorage.getItem('cart')
         this.cartlist=JSON.parse(cartlist)
         console.log('我正在看你',this.cartlist)
        console.log('我找到是你',this.cartlist[0]['price'])
        this.showorder()
    },
    

}
</script>

<style>

</style>
点击提交订单按钮，验证了手机号格式

###在mounted （页面加载之前，数据加载之后） 获取localStorage里面的数据
当然了，需要定义一个订单信息的容器，将localStorage里面的数据取出来之后，
并且转化成 Json 串，打印结果是一个列表，里面包裹一个字典，可以根据下标0取出来
整个字典，然后用字典的取值方法，取出商品价格，商品标题.很神奇，
this.cartlist[0]['price'] 和 this.cartlist[0].price都能拿出指定数据，
让后将这个数据返回给后端，还有一个蓄谋已久的用户id，后端添加数据进订单表中，
根据用户id就可以查询出登录的那个人的订单。

为什么 uid 和 商品信息 从localStorage 取数据的方式不一样，因为一个是单个数据，一个是
列表，也就是多个数据

